<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
@extends('app')
@section('content')
<!--<h1>{!!$title!!}</h1>
<p>{{$intro}}</p>
    @if($first == 'jellybool')
        <h1>{{ $first }}</h1>
    @else
        <h1>{{ $last }}</h1>
    @endif
    @foreach( $names as $name)
        <h1>{{ $name }}</h1>
    @endforeach-->

<button type="button" class="btn btn-primary" data-toggle="modal" onclick="openWindow(event,1)">新增</button>
<table class="table" id="articleTable">
    <tr>
        <th>title</th>
        <th>content</th>
        <th>操作</th>
    </tr>
    @foreach($articles as $article)
    <tr articleId="{{ $article->id }}">
        <td>{{ $article->title }}</td>
        <td>{{ $article->content }}</td>
        <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" onclick="openWindow(event,2)">
                编辑
            </button>
            <button type="button" class="btn btn-danger" data-toggle="modal" onclick="deleteData(event)">删除</button>
        </td>
    </tr>
    @endforeach
</table>
@endsection

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="id">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">title:</label>
                        <input type="text" class="form-control" id="title">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">content:</label>
                        <textarea class="form-control" id="content"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveBtn" onclick="save(event)">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>

    function openWindow(event,type){
        $("#myModal input").val('');
        if(type==1){
            $("#myModalLabel").html("新增");
        }else{
            $("#myModalLabel").html("编辑");
            var trObj = $(event.target).parents('tr');
            var title = trObj.children().eq(0).html();
            var content = trObj.children().eq(1).html();
            var id = trObj.attr("articleId");
            $("#title").val(title);
            $("#content").val(content);
            $("#id").val(id);
        }

        $("#myModal").modal('show');
    }

    function save(event){
        var id = $("#id").val();
        console.log(id);
        var type = 'post';
        if(id){
            type = 'put';
        }
        var title = $("#title").val();
        var content = $("#content").val();
        $.ajax({
            url:"/api/article",
            type:type,
            data:{id:id,title:title,content:content},
            success:function(data){
                closeWin('myModal');
                if(id){
                    //更新
                    var trObj = $("#articleTable tbody").find("tr[articleId="+id+"]");
                    trObj.children().eq(0).html(title);
                    trObj.children().eq(1).html(content);
                }else{
                    //新增
                    var increase_id = data.id;
                    var operation =
                        "<button type='button' class='btn btn-primary' data-toggle='modal' onclick='openWindow(event,2)'>"+
                    "编辑"+
                    "</button>"+
                    "<button type='button' class='btn btn-danger' data-toggle='modal' onclick='deleteData(event)'>删除</button>";

                    var trObj = "<tr articleId='"+increase_id+"'><td>"+title+"</td><td>"+content+"</td><td>"+operation+"</td></tr>";
                    $("#articleTable tbody").append(trObj);
                }
            }
        });

    }

    function deleteData(event){
        var trObj = $(event.target).parents("tr");
        var id = trObj.attr("articleId");
        $.ajax({
            url:'/api/article/'+id,
            type:'delete',
            success:function(data){
                console.log('delete success');
            }
        });
        trObj.remove();
    }

    function closeWin(id){
        $("#"+id).modal("hide");
    }
</script>

</body>
</html>